<template>
    <div class="g-width100 g-height100">
        <container type="top-header" :show="{header:formShow}" class="g-width100 g-height100" header-style="height:auto;" main-style="padding:0;">
            <Form slot="header" inline
                  submit-bus-key="MyLeaveApplicationManageList"
                  :form-items="formItems"
                  label-width=""
            ></Form>
            <Table slot="main"
                   ref="table"
                   form-submit-bus-key="MyLeaveApplicationManageList"
                   :columns="columns"
                   :operations="tableOperations"
                   unique-label="name"
                   v-on:toolbarSearchClick="formShow = !formShow"
            ></Table>
        </container>
        <ProcessDiagramDialog ref="processDiagramDiaglog" :data-model-id="flowable.dataModelId" :data-model-type="flowable.dataModelType" title="流程图"></ProcessDiagramDialog>

    </div>

</template>

<script>
    import Container from '../../../../common-util/src/components/page/Container.vue'
    import Form from '../../../../common-util/src/components/page/Form.vue'
    import Table from '../../../../common-util/src/components/page/Table.vue'
    import ProcessDiagramDialog from '../../../../common-util/src/components/flowable/ProcessDiagramDialog.vue'

    export default {
        components:{
            Form,
            Table,
            ProcessDiagramDialog,
            Container
        },
        data(){
            return {
                flowable:{
                    dataModelId: 'f195a85d-aefc-11ea-abb6-00ff136e7b9e',
                    dataModelType: 'runtime',
                },
                formShow: true,
                formItems:[
                    {
                        field: {
                            name: 'serialNo'
                        },
                        element:{
                            label: '请假单号',
                        }
                    },
                    {
                        field: {
                            name: 'approveStatusDictId'
                        },
                        element:{
                            type: 'selectDict',
                            selectDict:{
                                groupCode:'user_leave_application_approve_status'
                            },
                            label: '审批状态',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'get',
                                    url: this.$baseURL.attend +  '/attend/userleaveapplication/myListPage',
                                    label: '查询'
                                },
                                {
                                    action: 'reset',
                                    label: '重置'
                                }
                            ]
                        }
                    }
                ],
                columns:[
                    {
                        prop: 'serialNo',
                        label:'请假单号'
                    },
                    {
                        prop: 'approveStatusDictName',
                        label:'审批状态'
                    },
                    {
                        prop: 'isAskForLeave',
                        label:'请/补假',
                        formatter: (row, column, cellValue) => {
                            return cellValue ? '请假' : '补假'
                        }
                    },
                    {
                        prop: 'approveSubmitAtTxt',
                        label:'审批提交时间'
                    },
                    {
                        prop: 'approveFinishAtTxt',
                        label:'审批结束时间'
                    },
                    {
                        prop: 'reason',
                        label:'原因'
                    },
                    {
                        prop: 'remark',
                        label:'备注'
                    },
                ],
                tableOperations:[
                    {
                        action: 'nav',
                        url:'/user/leaveApplicationAdd',
                        label: '添加假期申请'
                    },
                    {
                        action: 'nav',
                        disabledOnMissingSelect:true,
                        url:'/user/leaveApplicationEdit/:id',
                        label: '编辑假期申请'
                    },
                    {
                        action: 'delete',
                        url:this.$baseURL.attend +  '/attend/userleaveapplication/:id',
                        disabledOnMissingSelect:true,
                        label:'删除'
                    },
                    {
                        action: this.showProcessDiagram,
                        disabledOnMissingSelect:true,
                        label:'流程图'
                    }
                ]
            }
        },
        methods:{
            showProcessDiagram(row){
                this.$refs.processDiagramDiaglog.show()

            }
        }
    }
</script>

<style scoped>

</style>